<template>
	<div class="word" @click="click">
		<div class="eng">{{props.eng}}</div>
		<div class="chi" :style="{display:display}">{{props.chi}}</div>
	</div>
</template>

<script setup lang="ts">
	import { PropType, ref } from 'vue';
	const props = defineProps({
		eng: {
			type: String,
			defalut: ''
		},
		chi: {
			type: String,
			defalut: ''
		},
	})
   //音频链接
	const src = ref('')
	// 控制样式
	const display = ref<'flex'|'none'>('none')
	//计数器
	const count = ref(0)
	// 播放音频事件
	const play = () => {
		src.value = "http://dict.youdao.com/dictvoice?audio=" + props.eng + "&type=2"
		let audio = document.querySelector('audio') as HTMLAudioElement;
		audio = new Audio(src.value)
		audio.play();
	}
	
	function click() {
	        const fresh = (count.value + 1) % 2
	        count.value  = fresh
	        if (count.value === 1) {
	            display.value = 'flex'
	        } else {
	            display.value = 'none'
	        }
	        play()
	    }
</script>

<style>
	.word {
		width: 100vw;
		height: 14vh;
		display: flex;
		flex-direction: column;
		border: 1px solid rgb(123, 121, 121);
		padding-bottom: 10px;
	}

	.eng {
		width: 79vw;
		height: 4vh;
		font-size: 25px;
		margin-left: 10px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.chi {
		width: auto;
		height: 4vh;
		margin-left: auto;
		margin-right: 10px;
		margin-top: auto;
	}
</style>